<template>
    <DataBaseModalVue ref="dbmodal" />
    <a-button @click="onShowModal" shape="round" class="add-btn">
        <template #icon>
            <PlusOutlined />
        </template>
        添加
    </a-button>
    <a-table
        class="ant-table-striped"
        :columns="columns"
        :data-source="data"
        :scroll="{ y: 460 }"
        :pagination="pagination"
        :rowClassName="(index) => (index % 2 === 1 ? 'table-striped' : null)"
        :rowKey="(data) => data.id"
    >
        <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'action'">
                <span>
                    <a-button type="text" @click="onEdit(record.id)">
                        <EditTwoTone twoToneColor="#0066FF" />
                    </a-button>
                    <a-divider type="vertical" />
                    <a-popconfirm
                        title="是否删除？"
                        okText="确定"
                        cancelText="取消"
                        @confirm="onDel(record.id)"
                    >
                        <template #icon>
                            <QuestionCircleOutlined style="color: red" />
                        </template>
                        <a-button type="text">
                            <DeleteTwoTone twoToneColor="#FF0033" />
                        </a-button>
                    </a-popconfirm>
                </span>
            </template>
        </template>
    </a-table>
</template>

<script setup>
import { ref } from "vue"
import { message } from "ant-design-vue"
import { useDataBaseStore } from "@/stores/dataBase"
import {
    EditTwoTone,
    DeleteTwoTone,
    QuestionCircleOutlined,
    PlusOutlined,
} from "@ant-design/icons-vue"
import { DataBaseApi } from "@/api"
import DataBaseModalVue from "@/components/modal/DataBaseModal.vue"

const dataBaseStore = useDataBaseStore()
const dbmodal = ref(null)
const pagination = ref({
    size: "small",
})

//表头
const columns = [
    {
        title: "数据源代码",
        dataIndex: "id",
        width: "12%",
    },
    {
        title: "数据源名称",
        dataIndex: "name",
    },
    {
        title: "IP地址",
        dataIndex: "ip",
    },
    {
        title: "数据源类型",
        dataIndex: "type",
        width: "15%",
    },
    {
        title: "用户名",
        dataIndex: "user",
        width: "15%",
    },
    {
        title: "服务名",
        dataIndex: "serv",
        width: "10%",
    },
    {
        title: "操作",
        dataIndex: "action",
        align: "center",
        width: "12%",
    },
]

//数据
const data = dataBaseStore.getDbs

//编码数据源信息
const onEdit = (id) => {
    dbmodal.value.showModal(id)
}

const onShowModal = () => {
    dbmodal.value.showModal()
}

const onDel = (id) => {
    DataBaseApi.delete(id).then((res) => {
        if (res == "success") {
            dataBaseStore.delDataSource(id)
            message.success("刪除成功")
        } else {
            message.error(res)
        }
    })
}
</script>

<style scoped>
.ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
}

.add-btn {
    margin: 8px;
    min-width: 80px;
}
</style>
